<template>
  <div id="app">
    <!-- 这个路由，只会匹配两个组件，要么是Login，要么是Layout -->
    <!-- <transition :name="transitionName">
      <router-view></router-view>
    </transition> -->

    <!-- 测试高级组件 -->
    <!-- <notification content="测试内容"/> -->
    <button @click="notify">弹出提示</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      transitionName:'slide-left'
    }
  },
  mounted(){
    // this.$notify({
    //   content:'测试Notification',
    //   btn:'close'
    // })
  },
  methods:{
    notify(){
      this.$notify({
        content:'测试Notification',
        btn:'close'
      })
    }
  },
  // 接着在父组件内
  // watch $route 决定使用哪种过渡
  watch: {
    '$route' (to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      
      this.transitionName = toDepth < fromDepth ? 'slide-left' : 'slide-right'
    }
  }
}
</script>

<style>
@import './assets/iconfont/iconfont.css';
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow-y: hidden;
}
#app {
  height: 100%;
}
.slide-left-enter,.slide-left-leave-to{
  /* transform: translateX(100vw); */
  transform: translate3d(100%, 0, 0);
  /* opacity: 0; */
}


.slide-right-enter,.slide-right-leave-to{
  /* transform: translateX(100vw); */
  transform: translate3d(100%, 0, 0);
  /* opacity: 1; */
}

.slide-right-leave-active{
  transition: all 1s;
}

.slide-left-enter-active{
  transition: all 1s;
}



</style>
